<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul li:hover{
            color: red;
        }

        #box{
            width: 300px;
            height: 200px;
            background: pink;
        }

        #box:hover .shaxian{
            color: red;
        }

        input:focus{
            width: 300px;
        }

        .A li:first-of-type{
            color: pink;
        }

        .B li:first-of-type{
            color: orange;
        }

        .B li:last-of-type{
            color: purple;
        }

        .B li:nth-of-type(2){
            color: gray;
        }

        .B li:nth-of-type(odd){
            color: lightgreen;
        }

        .B li:nth-of-type(even){
            color: gold;
        }

        .B li:nth-of-type(2n+1){
            color: silver;
        }
    </style>
</head>
<body>
    <!-- 
        1. :hover
            s1:hover{ ... }
            当鼠标悬停在s1上时, s1才会使用css样式

            高阶hover用法 ( hover + 关联选择器 )
            s1:hover  s2{...}
            当鼠标悬停在s1上时,s1的后辈s2使用css样式
            s1:hover > s2{...}
            当鼠标悬停在s1上时,s1的儿子s2使用css样式
            s1:hover + s2{...}
            当鼠标悬停在s1上时,s1的一个兄弟s2使用css样式
            s1:hover ~ s2{...}
            当鼠标悬停在s1上时,s1的所有兄弟s2使用css样式

        2. :focus
            s1:focus{ ... } 当s1获取到光标时,s1才会使用css样式

        3. child
            父级 -> 顺序 -> 元素
            先找s1的父级,再找父级的所有子元素,
            最后判断子元素中的第一个是否为s1,
            如果是,则匹配上,否则匹配失败
            s1:first-child{ ... }
            s1:last-child{ ... }
            s1:nth-child(N){ ... }
            s1:nth-last-child(N){ ... }

        4. of-type
            父级 -> 元素 -> 顺序
            先找s1的父级, 再找父级下的所有s1元素,最后匹配s1中的第一个
            :first-oftype{ ... }
            :last-of-type{ ... }
            :nth-of-type(N){ ... }
            :nth-last-of-type(N){ ... }

            nth中的(N)的写法:
            *数字
            *单词
                odd     奇数
                even    偶数
            *一元一次方程
                n=0, 1, 2, 3,....
                2n
                3n
                2n+1
                2n+2
                ...
     -->

    <ul>
        <li>黄焖鸡</li>
        <li>煲仔饭</li>
        <li>卤肉饭</li>
    </ul>

    <div id="box">
        <p>兰州拉面</p>
        <p class="shaxian">沙县小吃</p>
        <p>黄焖鸡米饭</p>
    </div>

    <input type="text">
    <hr>


    2019你最喜欢的女演员
    <ul class="A">
        <li>杨幂</li>
        <li>迪丽热巴</li>
        <li>古力娜扎</li>
        <li>马尔扎哈</li>
        <li>真皮沙发</li>
    </ul>


    2019你最喜欢的男演员
    <ol class="B">
        <p>赵云鹏</p>
        <li>加藤鹰</li>
        <li>吴秀波</li>
        <li>李时珍</li>
        <li>刘德华</li>
        <li>张学友</li>
        <li>周润发</li>
        <li>梁朝伟</li>
        <p>孙思邈</p>
    </ol>
</body>
</html>